.unread-divider {
  font-size: 13px;
  font-weight: 500;

  position: relative;
  z-index: 1;

  padding: 24px 32px 24px 43px;

  text-align: center;
  text-transform: uppercase;

  color: $havelock-blue;

  @include no-select();


  .text {
    line-height: 24px;

    display: inline-block;

    height: 24px;

    vertical-align: middle;

    background-color: white;
    span {
      line-height: 24px;

      display: inline-block;

      height: 24px;

      vertical-align: middle;
    }
  }

  &:after {
    position: absolute;
    z-index: -1;
    top: 36px;
    right: 0;
    left: 0;

    height: 0;

    content: '';

    border-bottom: 1px dotted $havelock-blue;
  }
}
